<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://unpkg.com/vue"></script>
		<title>插槽</title>
		<div id="app">
			<!-- <div>这是子组件</div> -->
			<!-- {{msg}} -->
			<!-- data:{
				msg:"这是父组件"
			} -->
			
			
			<child>
				<template #child1>
					<!-- <template v-slot:child1> -->
					<!-- <template>模板</template> -->
					<p>你好</p>
					<h1>{{msg}}</h1><!-- //'<div>{{msg}}<slot>默认值</solt></div> -->
					<button>1按钮</button>
					</br>
				</template>
				<!-- </br> -->
				<template #child2>
					<!-- <template v-slot:child1> -->
					
					<!-- <button>2按钮</button> -->
					<button>{{msg}}</button>
				</template>
				
				<!-- 子组件可以无限插入内容 -->
				<!-- <button>你好</button> -->
				
			</child>
			<!-- <child></child>
			<child></child> -->
			
			<!-- 父组件是本身作用 子组件也是本身作用  但父子不能跨自身限制 -->
			<!-- <插槽的作用是在子组件的组件里插入或者调用父组件的内容 -->
			<!-- slot是内容分发  的 途径 父组件把自己的内容分发给子组件 子组件就接受内容 -->
			
			<!-- <button>提示1</button> -->
			
		</div>
		
	</head>
	<body>
		<script>
			<!-- <插槽的作用是在子组件的组件里插入或者调用父组件的内容 -->
			Vue.component('child',{
				//'<div><slot>这是子组件</solt></div>'相当于默认值  父组件有内容就用  没有就不用
				// '<div>{{msg}}<slot>默认值<slot></div>' 报错  父只对父起作用 子也是
				// '<div>这是子组件</div>'
				
				template:'<div>这是子组件<slot name="child1">默认值1</slot><slot name="child2">默认值2</slot></div>'
			
				
			});
			//创建根实例
			new Vue({
				el:"#app",
				data:{
					msg:"这是父组件"
				}
			})
			
		</script>
	</body>
</html>
